<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">

      <el-form-item label="姓名" prop="name" label-width="40">
        <el-input
            v-model="queryParams.name"
            placeholder="请输入姓名"
            clearable
            @keyup.enter="handleQuery"
            :disabled="isIdCardDisabled"
            style="width: 120px;"
        />
      </el-form-item>

      <el-form-item label="身份证号码" prop="idCard" label-width="90">
        <el-input
            v-model="queryParams.idCard"
            placeholder="请输入身份证号码"
            @keyup.enter="handleQuery"
            :disabled="isIdCardDisabled"
        />
      </el-form-item>
      <!--      <el-form-item label="所属地区" prop="parkId" label-width="70">
              <el-input
                  v-model="queryParams.parkId"
                  placeholder="请输入所属地区"
                  clearable
                  @keyup.enter="handleQuery"
              />
            </el-form-item>-->
      <el-form-item label="申报时间" prop="applyTime" label-width="70">
        <el-date-picker clearable
                        v-model="queryParams.applyTime"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择申报开始时间"
                        style="width: 200px;">
        </el-date-picker>
      </el-form-item>
      <!--      <el-form-item label="年龄" prop="age">
              <el-input
                v-model="queryParams.age"
                placeholder="请输入年龄"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-input
                v-model="queryParams.gender"
                placeholder="请输入性别"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="民族" prop="ethnic">
              <el-input
                v-model="queryParams.ethnic"
                placeholder="请输入民族"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="文化程度" prop="educationLevel">
              <el-input
                v-model="queryParams.educationLevel"
                placeholder="请输入文化程度"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="工龄" prop="workYears">
              <el-input
                v-model="queryParams.workYears"
                placeholder="请输入工龄"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input
                v-model="queryParams.phone"
                placeholder="请输入联系电话"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="工种" prop="jobTypeId">
              <el-input
                v-model="queryParams.jobTypeId"
                placeholder="请输入工种"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="行业" prop="industryId">
              <el-input
                v-model="queryParams.industryId"
                placeholder="请输入行业"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="家庭地址" prop="address">
              <el-input
                v-model="queryParams.address"
                placeholder="请输入家庭地址"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>

            <el-form-item label="单位名称" prop="unitName">
              <el-input
                v-model="queryParams.unitName"
                placeholder="请输入单位名称"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="机构代码" prop="socialCreditCode">
              <el-input
                v-model="queryParams.socialCreditCode"
                placeholder="请输入机构代码"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="审核时间" prop="auditTime">
              <el-date-picker clearable
                v-model="queryParams.auditTime"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择审核时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="是否单位," prop="isUnit">
              <el-input
                v-model="queryParams.isUnit"
                placeholder="请输入是否单位,"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">刷新</el-button>
        <el-button
            type="warning"
            plain
            icon="Download"
            @click="handleExport"
            v-hasPermi="['health:dataReview:export']"
        >导出
        </el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!--      <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="Plus"
                @click="handleAdd"
                v-hasPermi="['health:dataReview:add']"
              >新增</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="success"
                plain
                icon="Edit"
                :disabled="single"
                @click="handleUpdate"
                v-hasPermi="['health:dataReview:edit']"
              >修改</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                icon="Delete"
                :disabled="multiple"
                @click="handleDelete"
                v-hasPermi="['health:dataReview:remove']"
              >删除</el-button>
            </el-col>-->
      <!--      <el-col :span="1.5">
              <el-button
                type="warning"
                plain
                icon="Download"
                @click="handleExport"
                v-hasPermi="['health:dataReview:export']"
              >导出</el-button>
            </el-col>-->
      <!--      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>-->
    </el-row>

    <el-table v-loading="loading"
              :data="dataReviewList"
              @selection-change="handleSelectionChange"
              border="true"
              height="660"
    >
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="姓名" align="center" prop="name" fixed="left"/>
      <el-table-column label="家庭地址" align="center" prop="address" width="150" show-overflow-tooltip="true"/>
      <el-table-column label="年龄" align="center" prop="age"/>
      <!--      <el-table-column label="审核状态" align="center" prop="auditStatus"/>-->
      <el-table-column label="审核状态" align="center" prop="auditStatus" width="90">
        <template #default="scope">
          <span
              :style="{ color: scope.row.auditStatus === 0 ? 'orange' : scope.row.auditStatus === 1 ? 'green' : 'red' }">
            {{ scope.row.auditStatus === 0 ? '待审核' : scope.row.auditStatus === 1 ? '审核通过' : '审核不通过' }}
          </span>
        </template>
      </el-table-column>
      <!--      <el-table-column label="性别" align="center" prop="gender"/>-->
      <el-table-column label="性别" align="center" prop="gender">
        <template #default="scope">
          {{ scope.row.gender === 1 ? '男' : scope.row.gender === 0 ? '女' : '' }}
        </template>
      </el-table-column>
      <el-table-column label="手机号码" align="center" prop="phone" width="120"/>
      <el-table-column label="是否单位" align="center" prop="isUnit">
        <template #default="scope">
          {{ scope.row.isUnit === 1 ? '是' : scope.row.isUnit === 0 ? '否' : '' }}
        </template>
      </el-table-column>
      <el-table-column label="企业名称" align="center" prop="unitName" width="120" show-overflow-tooltip="true"/>
      <el-table-column label="文化程度" align="center" prop="educationLevel"/>
      <el-table-column label="民族" align="center" prop="ethnic"/>
      <el-table-column label="身份证号码" align="center" prop="idCard" width="150" show-overflow-tooltip="true"/>
      <el-table-column label="工龄" align="center" prop="workYears"/>
      <el-table-column label="行业" align="center" prop="jobTypeId" width="130" show-overflow-tooltip="true">
        <template #default="scope">
          <span>{{ getJobTypeLabel(scope.row.jobTypeId, jobTypes) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="地区" align="center" prop="parkId" width="100">
        <template #default="scope">
          <span>{{ getJobTypeLabel(scope.row.parkId, parks) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="申报时间" align="center" prop="applyTime" width="180" show-overflow-tooltip="true">
        <template #default="scope">
          <span>{{ parseTime(scope.row.applyTime,) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="机构代码" align="center" prop="socialCreditCode" width="130"/>
      <el-table-column label="摊位证" align="center" width="130">
        <template #default="scope">

          <!--preview-teleported:解决elementPlus中表格中图片放大层级问题-->
          <el-image
              preview-teleported
              v-if="scope.row.uploadFile"
              :src="baseUrl+scope.row.uploadFile"
              :preview-src-list="[baseUrl+scope.row.uploadFile]"
              :initial-index="0"
              fit="cover"
              style="width: 80px; height: 60px; cursor: pointer;"
          />
          <span v-else>—</span>
        </template>
      </el-table-column>
      <el-table-column label="审核时间" align="center" prop="auditTime" width="120" show-overflow-tooltip="true">
        <template #default="scope">
          <span>{{ parseTime(scope.row.auditTime,) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
                       v-hasPermi="['health:dataReview:edit']">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                     v-hasPermi="['health:dataReview:edit']">修改
          </el-button>
          <!--          <el-button-->
          <!--              type="primary"-->
          <!--              icon="House"-->
          <!--              @click="goToReserve(scope.row.idCard, scope.row.socialCreditCode)"-->
          <!--              v-hasPermi="['health:dataReview:reserve']"-->
          <!--          >-->
          <!--            体检预约-->
          <!--          </el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

    <!-- 添加或修改人员信息对话框 -->
    <el-dialog :title="title" v-model="open" width="666px" append-to-body>
      <el-form ref="dataReviewRef" :model="form" :rules="rules" label-width="100px" label-position="top"
               style="padding: 5px 80px;">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名"/>
        </el-form-item>
        <el-form-item label="身份证号码" prop="idCard">
          <el-input v-model="form.idCard" placeholder="请输入身份证号码"/>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age" placeholder="请输入年龄"/>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="form.gender" placeholder="请选择">
            <el-option label="男" :value=1></el-option>
            <el-option label="女" :value=0></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="民族" prop="ethnic">
          <el-select v-model="form.ethnic" filterable placeholder="请选择">
            <el-option
                v-for="item in ethnics"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="文化程度" prop="educationLevel">
          <el-select v-model="form.educationLevel" placeholder="请选择">
            <el-option label="小学" value="小学"></el-option>
            <el-option label="初中" value="初中"></el-option>
            <el-option label="高中" value="高中"></el-option>
            <el-option label="大专" value="大专"></el-option>
            <el-option label="本科" value="本科"></el-option>
            <el-option label="硕士" value="硕士"></el-option>
            <el-option label="博士" value="博士"></el-option>
            <el-option label="教授" value="教授"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工龄" prop="workYears">
          <el-input v-model="form.workYears" placeholder="请输入工龄"/>
        </el-form-item>
        <!--TODO 园区        -->
        <!--        <el-form-item label="所属地区" prop="parkId">
                  <el-select v-model="form.parkId" filterable placeholder="请选择">
                    <el-option
                        v-for="item in parks"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </el-form-item>-->
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入联系电话"/>
        </el-form-item>
        <!--TODO 工种        -->
        <el-form-item label="工种" prop="jobTypeId">
          <el-select-v2
              v-model="form.jobTypeId"
              :options="jobTypes"
              filterable
              placeholder="请选择工种"
          />
        </el-form-item>
<!--        <el-form-item label="行业" prop="industryId">-->
<!--          <el-input v-model="form.industryId" placeholder="请输入行业"/>-->
<!--        </el-form-item>-->
        <el-form-item label="家庭地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入家庭地址"/>
        </el-form-item>
        <!--        <el-form-item label="申报时间" prop="applyTime">
                  <el-date-picker clearable
                                  v-model="form.applyTime"
                                  type="datetime"
                                  value-format="YYYY-MM-DD HH:mm:ss"
                                  placeholder="请选择申报时间">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="是否单位" prop="isUnit">
                  <el-select v-model="form.isUnit" placeholder="请选择">
                    <el-option label="否" :value=0></el-option>
                    <el-option label="是" :value=1></el-option>
                  </el-select>
                </el-form-item>-->
        <el-form-item label="单位名称" prop="unitName">
          <el-input v-model="form.unitName" placeholder="请输入单位名称"/>
        </el-form-item>
        <el-form-item label="机构代码" prop="socialCreditCode" label-width="140">
          <el-input v-model="form.socialCreditCode" placeholder="请输入机构代码"/>
        </el-form-item>
        <el-form-item v-if="form.isUnit===0" label="上传文件" prop="uploadFile">
          <image-upload v-model="form.uploadFile"/>
        </el-form-item>
        <el-form-item label="审核状态" prop="auditStatus">
          <el-select v-model="form.auditStatus" placeholder="请选择">
            <el-option label="待审核" :value=0></el-option>
            <el-option label="审核通过" :value=1></el-option>
            <el-option label="审核不通过" :value=2></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核时间" prop="auditTime">
          <el-date-picker clearable
                          v-model="form.auditTime"
                          type="datetime"
                          value-format="YYYY-MM-DD HH:mm:ss"
                          placeholder="请选择审核时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="DataReview">
import {addDataReview, delDataReview, getDataReview, listDataReview, updateDataReview} from "@/api/health/dataReview"
import ImageUpload from "@/components/ImageUpload/index.vue";
import {ethnics, jobTypes, loadJobTypes, loadParkId, parks} from "@/api/employee/applyBaseData.js";
import {useRouter} from 'vue-router';
import useUserStore from "@/store/modules/user.js";

const userStore = useUserStore()
const router = useRouter();

const {proxy} = getCurrentInstance()
// const baseUrl = "http://117.157.64.139:9100"
const baseUrl = import.meta.env.VITE_STATIC_BASE_URL
const dataReviewList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")
const isIdCardDisabled = ref(false); // 身份证输入框是否禁用 设置为 true 表示不可输入


const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: null,
    idCard: null,
    age: null,
    gender: null,
    ethnic: null,
    educationLevel: null,
    workYears: null,
    parkId: null,
    phone: null,
    jobTypeId: null,
    industryId: null,
    address: null,
    applyTime: null,
    auditStatus: null,
    unitName: null,
    socialCreditCode: null,
    uploadFile: null,
    auditTime: null,
    remark: null,
    isUnit: null
  },
  rules: {
    name: [
      {required: true, message: "姓名不能为空", trigger: "blur"}
    ],
    idCard: [
      {required: true, message: "身份证号码不能为空", trigger: "blur"}
    ],
    isUnit: [
      {required: true, message: "是否单位,不能为空", trigger: "blur"}
    ]
  }
})

const {queryParams, form, rules} = toRefs(data)

/** 查询人员信息列表 */
function getList() {
  loading.value = true
  // 判断登录用户是系统用户还是普通用户 normal
  userStore.getInfo().then((res) => {
    // 获取登录用户类型
    const userType = res.user.userType;
    // 获取唯一识别码
    const idCard = res.user.identifyCode;
    // 获取姓名
    const nickName = res.user.nickName;

    // 获取角色
    const roles = res.roles;
    const role = roles[0];

    // 如果用户为普通用户,那么就查询当前用户的数据
    if ('normal' === role) {
      if ("01" === userType) {
        queryParams.value.name = nickName;
        queryParams.value.idCard = idCard;
        isIdCardDisabled.value = true;
      } else if ("02" === userType) {
        queryParams.value.unitName = nickName;
        queryParams.value.idCard = idCard;
        isIdCardDisabled.value = true;
      }
      getData()
    } else {
      getData()
    }
  });
}

function getData() {
  listDataReview(queryParams.value).then(response => {
    dataReviewList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

// 取消按钮
function cancel() {
  open.value = false
  reset()
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    name: null,
    idCard: null,
    age: null,
    gender: null,
    ethnic: null,
    educationLevel: null,
    workYears: null,
    parkId: null,
    phone: null,
    jobTypeId: null,
    industryId: null,
    address: null,
    applyTime: null,
    auditStatus: null,
    unitName: null,
    socialCreditCode: null,
    uploadFile: null,
    auditTime: null,
    remark: null,
    isUnit: null
  }
  proxy.resetForm("dataReviewRef")
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef")
  handleQuery()
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id)
  single.value = selection.length != 1
  multiple.value = !selection.length
}

/** 新增按钮操作 */
function handleAdd() {
  reset()
  open.value = true
  title.value = "添加人员信息"
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset()
  const _id = row.id || ids.value
  getDataReview(_id).then(response => {
    form.value = response.data
    open.value = true
    title.value = "修改人员信息"
  })
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["dataReviewRef"].validate(valid => {
    if (!valid) return;

    // 审核不通过时必须填写备注
    if (form.value.id != null && form.value.auditStatus === 2) {
      if (!form.value.remark || form.value.remark.length === 0) {
        proxy.$modal.msgError("请在备注中填写审核不通过的原因！");
        return;
      }
    }

    // 确定操作方法和提示信息
    const operation = form.value.id != null ? updateDataReview : addDataReview;
    const successMessage = form.value.id != null ? "修改成功" : "新增成功";

    // 具体调用方法
    operation(form.value).then(response => {
      proxy.$modal.msgSuccess(successMessage);
      open.value = false;
      getList();
    });
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value
  proxy.$modal.confirm('是否确认删除人员信息编号为"' + _ids + '"的数据项？').then(function () {
    return delDataReview(_ids)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {
  })
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('health/dataReview/export', {
    ...queryParams.value
  }, `dataReview_${new Date().getTime()}.xlsx`)
}

// 后台id转为中文展示方法
function getJobTypeLabel(id, list) {
  let lableName = list.find(item => item.value == id);
  return lableName ? lableName.label : '未知';
}

// 资源加载就执行的方法
onMounted(() => {
  // 这里执行需要DOM加载完成后才能执行的操作
  loadJobTypes();
  // loadEthnic();
  loadParkId();
  getList();
})
</script>

<style scoped>

.app-container, .el-table, .el-main {
  overflow: visible !important;
}

</style>